<template>
  <div>
    <el-dialog :close-on-click-modal="false" :visible.sync="visible">
      <el-dialog width="40%" title="选择属性" :visible.sync="innerVisible" append-to-body>
        <div>
          <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
            <el-form-item>
              <el-input v-model="dataForm.attrName" placeholder="属性名" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="getDataList()">查询</el-button>
            </el-form-item>
          </el-form>
          <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="handleInnerSelectionChange" style="width: 100%;">
            <el-table-column type="selection" header-align="center" align="center" width="50">
            </el-table-column>
            <el-table-column prop="attrId" header-align="center" align="center" label="属性id">
            </el-table-column>
            <el-table-column prop="attrName" header-align="center" align="center" label="属性名">
            </el-table-column>
            <el-table-column prop="icon" header-align="center" align="center" label="属性图标">
            </el-table-column>
            <el-table-column prop="valueSelect" header-align="center" align="center" label="可选值列表">
            </el-table-column>
          </el-table>
          <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper">
          </el-pagination>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="innerVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitAddRealtion">确认新增</el-button>
        </div>
      </el-dialog>
      <el-row :gutter="10" style="margin-bottom: 10px">
        <el-col :span="3.5"><el-button type="primary" @click="addRelation">新建关联</el-button></el-col>
        <el-col :span="3.5"><el-button type="danger" @click="batchDeleteRelation" :disabled="multipleSelection.length <= 0">批量删除</el-button></el-col>
      </el-row>
      <el-table :data="relationList" style="width: 100%" @selection-change="handleSelectionChange" border>
        <el-table-column type="selection" header-align="center" align="center" width="50">
        </el-table-column>
        <el-table-column prop="attrId" header-align="center" align="center" width="50" label="#">
        </el-table-column>
        <el-table-column prop="attrName" header-align="center" align="center" label="属性名">
        </el-table-column>
        <el-table-column prop="valueSelect" header-align="center" align="center" label="可选值">
          <template slot-scope="scope">
            <el-tooltip placement="top">
              <div slot="content">
                <span v-for="(i, index) in scope.row.valueSelect.split(';')" :key="index">
                  {{i}}
                  <br />
                </span>
              </div>
              <div class="ellipsis">{{ scope.row.valueSelect }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column fixed="right" header-align="center" align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="relationRemove(scope.row.attrId)">移除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      innerVisible: false,
      attrGroupId: 0,
      relationList: [],
      multipleSelection: [],
      innerMultipleSelection: [],
      dataForm: {
        attrName: ""
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false
    };
  },
  methods: {
    init(attrGroupId) {
      this.visible = true;
      this.attrGroupId = attrGroupId || 0;
      this.$http({
        url: this.$http.adornUrl(`/product/attrgroup/${this.attrGroupId}/attr/relation`),
        method: 'get',
        params: this.$http.adornParams({})
      }).then(({ data }) => {
        this.relationList = data.data;
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleInnerSelectionChange(val) {
      this.innerMultipleSelection = val;
    },
    getDataList() {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl(`/product/attrgroup/${this.attrGroupId}/attr/norelation`),
        method: 'get',
        params: this.$http.adornParams({
          'page': this.pageIndex,
          'limit': this.pageSize,
          'attrName': this.dataForm.attrName
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list
          this.totalPage = data.page.totalCount
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    addRelation() {
      this.innerVisible = true;
      this.getDataList();
    },
    submitAddRealtion() {
      console.log("新增的数据: ", this.innerMultipleSelection);
      if (!this.innerMultipleSelection.length) {
        this.$message({
          type: "error",
          message: "请选择数据后操作!",
        });
        return;
      }
      this.innerVisible = false;
      let postData = [];
      this.innerMultipleSelection.forEach(item => {
        postData.push({ attrId: item.attrId, attrGroupId: this.attrGroupId });
      });
      this.$http({
        url: this.$http.adornUrl('/product/attrgroup/attr/relation/add'),
        method: 'post',
        data: this.$http.adornData(postData, false)
      }).then(({ data }) => {
        if (data.code == 0) {
          this.$message({
            type: "success",
            message: "新增关联成功"
          });
          this.$emit("refreshData");
          this.init(this.attrGroupId);
        }
      });

    },
    batchDeleteRelation() {
      let data = [];
      this.multipleSelection.forEach(item => {
        data.push({ attrId: item.attrId, attrGroupId: this.attrGroupId });
      });
      this.$http({
        url: this.$http.adornUrl('/product/attrgroup/attr/relation/delete'),
        method: 'post',
        data: this.$http.adornData(data, false)
      }).then(({ data }) => {
        if (data.code == 0) {
          this.$message({
            type: "success",
            message: "删除成功"
          });
          this.init(this.attrGroupId);
        } else {
          this.$message({
            type: "error",
            message: data.msg
          });
        }
      });
    },
    relationRemove(attrId) {
      let data = [];
      data.push({ attrId: attrId, attrGroupId: this.attrGroupId });
      this.$http({
        url: this.$http.adornUrl('/product/attrgroup/attr/relation/delete'),
        method: 'post',
        data: this.$http.adornData(data, false)
      }).then(({ data }) => {
        if (data.code == 0) {
          this.$message({
            type: "success",
            message: "删除成功"
          });
          this.init(this.attrGroupId);
        } else {
          this.$message({
            type: "error",
            message: data.msg
          });
        }
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
  },
  created() {

  },
  mounted() {

  },
  components: {},
}
</script>

<style>
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%; /* 确保宽度由父元素控制 */
}
</style>